<template>
    <div class="my_discovery">
        <!-- 介绍页面 -->
         <div class="head">
            <div class="text">噔噔Deng</div> 
            <div class="img">
            <img src="https://tse1-mm.cn.bing.net/th/id/OIP-C.ImvBR70_a_sPdUspNIN45wHaHa?w=214&h=214&c=7&r=0&o=5&dpr=2&pid=1.7"
            width="200px" height="200px">
            </div>
            
         </div>
    
        <van-grid :border="false" :column-num="4">
        <van-grid-item v-for="item in gridData" :key="item.id">
        <van-image :src="item.imgUrl" height="30px" />
        <div class="grid_text">{{ item.text }}</div>
        </van-grid-item>
        </van-grid>

    <div class="music_list">
      <div class="text">我的歌单</div>
      <van-button plain round type="default" size="small">
        <span>查看更多</span>
      </van-button>
    </div>
    
    <div class="right">
                <div class="player_button" @click="playMusic">
                    <van-icon v-if="!isPlayer" name="play-circle-o" size="25px" />
                    <van-icon v-else name="pause-circle-o" size="25px" >
                    </van-icon>
                </div>  
                <div class="player_button" @click="playMusic">
                    <van-icon v-if="!isPlayer" name="play-circle-o" size="25px" />
                    <van-icon v-else name="pause-circle-o" size="25px" />
                </div>  
                <div class="player_button" @click="playMusic">
                    <van-icon v-if="!isPlayer" name="play-circle-o" size="25px" />
                    <van-icon v-else name="pause-circle-o" size="25px" />
                </div>  
                <div class="player_button" @click="playMusic">
                    <van-icon v-if="!isPlayer" name="play-circle-o" size="25px" />
                    <van-icon v-else name="pause-circle-o" size="25px" />
                </div>  
                <div class="player_button" @click="playMusic">
                    <van-icon v-if="!isPlayer" name="play-circle-o" size="25px" />
                    <van-icon v-else name="pause-circle-o" size="25px" />
                </div>  
                <div class="player_button" @click="playMusic">
                    <van-icon v-if="!isPlayer" name="play-circle-o" size="25px" />
                    <van-icon v-else name="pause-circle-o" size="25px" />
                </div>  
    </div>
</div>
</template>
<script setup>
import { ref } from 'vue'
// 宫格数据
const gridData = ref([
  { id: 1, imgUrl: 'https://tse3-mm.cn.bing.net/th/id/OIP-C.RXvUkTJIvaKcnnBWVup_zgHaHa?w=172&h=180&c=7&r=0&o=5&dpr=2&pid=1.7', text: "本地歌曲" },
  { id: 2, imgUrl: 'https://tse1-mm.cn.bing.net/th/id/OIP-C._bw95e9zXUa4yzFz-dlGcAHaJ0?w=148&h=196&c=7&r=0&o=5&dpr=2&pid=1.7', text: "我的歌单" },
  { id: 3, imgUrl: 'https://tse1-mm.cn.bing.net/th/id/OIP-C.F78zmZTjIDHSsehY6EYFkwHaD4?w=307&h=180&c=7&r=0&o=5&dpr=2&pid=1.7', text: "云盘" },
  { id: 4, imgUrl: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.zLHHaqwTTkDuKK7xNjEt9AHaHa?w=160&h=180&c=7&r=0&o=5&dpr=2&pid=1.7', text: "最近播放" },
])

</script>
<style scoped>
.head {
  margin-top: 25px;
}
.left{
    display:inline;
    align-items: center;
}
.right{
    display:;
    align-items: center;
}
 
.img {
    overflow: hidden;
    width: 100%;
    height: 100%;
}

.text{
    color: #000;
  font-size: 18px;
  font-weight: 700;
}


.grid_text {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    font-size: 15px;
}

.music_list {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.music_list .text {
  color: #000;
  font-size: 25px;
  font-weight: 600;
}

.music_list span {
  color: #000;
}
</style>